<template>
  <div id="loginBGI">
    <div class="login-center">
      <div class="login-form">
        <form>
          <span class="login-title">网易账号登录</span>
          <div>
            <input type="text" placeholder="输入账号" v-model="user.phone" />
          </div>
          <div>
            <input
              type="password"
              placeholder="输入密码"
              v-model="user.password"
            />
          </div>
          <a href="javascript:;" @click="onSubmit">
            <div class="login-button">登&nbsp;&nbsp;录</div>
          </a>
          <div class="login-bottom">
            <a href="#">忘记密码？</a>
            <span>开通服务请联系客服</span>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex"
export default {
  name: "Login",
  data() {
    return {
      user: {
        phone: "13811012099",
        password: "123123",
      },
    }
  },
  methods: {
    onSubmit() {
      const phone = this.user.phone.trim()
      const password = this.user.password.trim()
      console.log(phone, this.user.password)
      if (!phone || !password) {
        alert("用户名或密码不能为空")
      } else if (
        !/^(13[0-9]|14[57]|15[0-35-9]|166|17[1-378]|18[0-35-9]|19[1-39])\d{8}$/.test(
          phone
        ) ||
        !/^[A-Za-z0-9_]{6,12}$/.test(password)
      ) {
        alert("用户名或密码格式不正确，密码为6-12位数字、字母、_")
      } else {
        alert("登录成功！")
        this.$router.push("/home")
      }
    },
  },
}
</script>

<style lang="less" scoped>
#loginBGI {
  width: 100%;
  height: 600px;
  background-image: url(https://yanxuan.nosdn.127.net/a4e4079d341287e215a3f154f16cb228.png?imageView&type=webp);
  .login-center {
    width: 1090px;
    height: 475px;
    margin: 0 auto;
    position: relative;
    .login-form {
      width: 300px;
      height: 390px;
      background-color: #fff;
      padding: 0 59px;
      position: absolute;
      right: 0;
      bottom: 0;
      form {
        width: 100%;
        height: 100%;

        div {
          width: 100%;
          height: 42px;
          border: 1px solid #d9d9d9;
          margin-bottom: 10px;
          // 输入框
          input {
            padding: 5px 0;
            // height: 26px;
            line-height: 26px;
            padding-left: 10px;
            width: 238px;
            font-size: 14px;
            font-weight: normal;
            border: 0;
            outline: 0;
          }
          // 输入框placeholder文字样式

          ::-webkit-input-placeholder {
            /* webkit内核浏览器 */
            color: #bdbdbd;
          }
          :-moz-placeholder {
            /* Firefox 18- */
            color: #bdbdbd;
          }
          ::-moz-placeholder {
            /* Firefox 19+ */
            color: #bdbdbd;
          }
          // :-ms-input-placeholder {/* IE */
          //   color: #bdbdbd;
          // }
        }
        // 登录标题
        .login-title {
          display: block;
          font-size: 24px;
          text-align: center;
          font-family: "Microsoft YaHei", "微软雅黑";
          padding: 40px 0;
          margin: 0;
        }
        // 登录按钮
        .login-button {
          margin: 24px 0;
          text-align: center;
          font-size: 18px;
          line-height: 42px;
          color: #fff;
          background-color: #b0882f;
        }
        // 底部
        .login-bottom {
          border: 0;
          font-size: 13px;
          color: #999;
          a {
            float: left;
            color: #999;
            text-decoration: none;
          }
          a:hover {
            color: #666;
          }
          span {
            float: right;
          }
        }
      }
    }
  }
}
</style>
